import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail'
import qs from 'querystring'
export default class News extends Component {
    state = {
        details: [
            { id: 1, title: "111", content: "content1111" },
            { id: 2, title: "222", content: "content2222" },
            { id: 3, title: "333", content: "content3333" },
        ]
    }
    render() {
        const { details } = this.state
        return (
            <div>
                <ul>
                    {details.map(e => {
                        const { id, title, content } = e;
                        return <li key={id}>
                            {/*向路由组件传递params参数*/}
                            {/* <Link to={`/home/news/detail/${id}/${title}/${content}`} >{title}</Link> */}
                            {/*向路由组件传递search参数*/}
                            {/* <Link to={`/home/news/detail?${qs.stringify(e)}`} >{title}</Link> */}
                             {/*向路由组件传递state参数*/}
                            <Link to={{pathname:'/home/news/detail',state:e}} >{title}</Link>
                        </li>
                    })}
                </ul>
                {/*声明接收params参数*/}
                {/* <Route path="/home/news/detail/:id/:title/:content" component={Detail}></Route> */}
                {/* search 、state 参数无需声明接收，正常注册路由即可*/}
                <Route path="/home/news/detail" component={Detail}></Route>
            </div>
        )
    }
}
